<template>
  <view class="page">
    <u-navbar @leftClick="navLeftClick" :fixed="false" title="申请退款" placeholder bgColor="#fff"></u-navbar>
    <view class="type">
      <view class="u-font-28" style="font-weight: 500;">退款方式</view>
      <view class="u-font-28" style="color: #818181;">仅退款</view>
    </view>
    <view class="refund-list">
      <view class="u-font-28 u-m-b-18" style="font-weight: 600;color: #000000;">商品信息</view>
      <view class="goods-list">
        <view class="goods-item" v-for="item in list" :key="item.id">
          <image class="goods-img" :src="item.subtitle?item.subtitle.split(',')[0]:''" mode="aspectFill" />
          <view class="u-flex-1">
            <view class="name u-line-2">{{ item.title }}</view>
            <view class="spec"><text class="u-line-1">{{ item.skuName }}</text></view>
            <view class="u-flex u-row-between u-col-bottom">
              <view class="price"><text>¥</text> {{ (item.priceCents / 100).toFixed(2) }}</view>
              <u-number-box
                integer
                disabledInput
                :min="1"
                :max="item.quantity"
                v-model="item.quantityNum"
                asyncChange
                @change="numChange($event, index)"
                button-size="52rpx"
              ></u-number-box>
            </view>
          </view>
        </view>
      </view>
      <u-line class="u-m-b-26" color="#E1E1E1"></u-line>
      <view class="u-font-28 u-text-right">退款金额：<text class="u-font-32" style="color: #E20300;">¥ {{ totalAmount }}</text></view>
    </view>
    <view class="remark">
      <view class="u-font-28 u-m-b-18" style="font-weight: 600;color: #000000;"><text style="color: #E20300;">*</text>退款原因</view>
      <textarea maxlength="200" v-model="remark" auto-height placeholder="限输入200字"></textarea>
    </view>
    <view class="btn" @click="submit">提交申请</view>
  </view>
</template>

<script>
import { getOrderItemsList, refundOrder } from '@/api/index'

export default {
  data() {
    return {
      id: '',
      orderItemsId: '',
      outTradeNo: '',
      tradeNo: '',
      list: [],
      totalAmount: 0,
      remark: '',
    };
  },
  onLoad(options) {
    if(options.id) {
      this.id = options.id
      this.outTradeNo = options.outTradeNo
      this.tradeNo = options.tradeNo
      this.orderItemsId = options.orderItemsId
      this.getPage()
    }
  },
  methods: {
    submit() {
      const that = this
      if(this.remark === '') {
        uni.showToast({
          title: '请输入退款原因',
          icon: 'none',
          mask: true
        })
        return
      }
      const parameter = {
        id: this.id,
        outTradeNo: this.outTradeNo,
        skuId: this.list[0].skuId,
        quantity: this.list[0].quantityNum,
        deptId: uni.getStorageSync('userInfo').deptId,
        tradeNo: this.tradeNo,
        refundReason: this.remark,
        refundAmount: this.totalAmount,
      }
      uni.showLoading({ mask: true })
      refundOrder(parameter).then(res => {
        uni.hideLoading()
        uni.showToast({
          icon: 'none',
          title: `退货成功`
        })
        setTimeout(() => {
          that.goBack()
        }, 1000)
      }).catch(() => {
        uni.hideLoading()
      })
    },
    async getPage() {
      const that = this
      uni.showLoading({ mask: true })
      await getOrderItemsList({orderId: this.id, id: this.orderItemsId, pageSize: 100}).then(res => {
        uni.hideLoading()
        this.list = res.rows.filter(v => v.id == this.orderItemsId).map(v => {
          v.quantity = v.quantity - v.returnQuantity
          return v
        })
        if(this.list.length == 0) {
          uni.showToast({
            icon: 'none',
            title: `暂无可售后商品`
          })
          setTimeout(() => {
            that.goBack()
          }, 1000)
          return
        }
        this.list.forEach(v => {
          v.quantityNum = 1
        })
        this.calculate()
      }).catch(() => {
        uni.hideLoading()
      })
    },
    calculate() {
      this.totalAmount = (this.list.reduce((total, item) => {
          return total + ((item.priceCents/100) * item.quantityNum);
        }, 0)) + (this.list.reduce((total, item) => {
          return total + ((item.freightAmount/100) * item.quantityNum);
        }, 0))
    },
    numChange(e, index){
      const item = JSON.parse(JSON.stringify(this.list[index]))
      item.quantityNum = e.value
      this.$set(this.list, index, item)
      const that = this
      this.$nextTick(() => {
        that.calculate()
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.page {
  width: 750rpx;
  min-height: 100vh;
  background-color: #F5F5F5;
  padding-bottom: 80rpx;
  position: relative;
  .type {
    width: 702rpx;
    height: 100rpx;
    background: #FFFFFF;
    border-radius: 12rpx 12rpx 12rpx 12rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    margin: 12rpx auto;
  }
  .refund-list {
    width: 702rpx;
    margin: 0 auto;
    padding: 24rpx 22rpx;
    background: #FFFFFF;
    border-radius: 12rpx;
    margin-bottom: 12rpx;
    .goods-list {
      display: flex;
      flex-direction: column;
      gap: 40rpx;
      margin-bottom: 40rpx;
      .goods-item {
        display: flex;
        gap: 20rpx;
        .goods-img {
          width: 140rpx;
          height: 140rpx;
          border-radius: 4rpx;
        }
        .name {
          height: 88rpx;
          font-size: 28rpx;
          color: #000000;
          line-height: 44rpx;
          margin-bottom: 2rpx;
        }
        .spec {
          text {
            width: 112rpx;
            font-size: 24rpx;
            color: #818181;
          }
        }
        .price {
          font-weight: 500;
          font-size: 28rpx;
          color: #E20300;
          text {
            font-size: 24rpx;
          }
        }
      }
    }
  }
  .remark {
    width: 702rpx;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 12rpx;
    padding: 14rpx 22rpx 22rpx;
    margin-bottom: 120rpx;
    textarea {
      padding: 12rpx 22rpx;
      font-size: 24rpx;
      background: #F7F7F7;
      border-radius: 8rpx;
      min-height: 120rpx;
    }
  }
  .btn {
    width: 440rpx;
    height: 90rpx;
    line-height: 90rpx;
    text-align: center;
    background: #56CB03;
    border-radius: 200rpx;
    border: 2rpx solid #56CB03;
    font-size: 28rpx;
    color: #FFFFFF;
    margin: 0 auto;
  }
}
</style>
